<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
    <title>产品概览</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html " class="active">产品</a></li>
                    <li><a href="./programme.html">解决方案</a></li>
                    <li><a href="./customer.html">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner">
            <img src="./img/u201.png" alt="">
            <div  class="cout_box">
                <p class="font_33">产品中心</p>
                <h3 class="font_33">致力于赋能智慧城市产业升级</h3>
            </div>
        </div>
        <div class="classification_box">
            <div class="container">
                <ul>
                    
                </ul>
            </div>
        </div>
        <div class="product_list">
            <div class="container claerFlex">
                <div class="tag">
                    <ul>
                        <!-- <li>
                            <span class="active"></span>
                            <p class="font_24 font_lighter active">分类1-名称1</p>
                        </li>
                        <li>
                            <span></span>
                            <p class="font_24 font_lighter">分类2-名称2</p>
                        </li>
                        <li>
                            <span></span>
                            <p class="font_24 font_lighter">分类3-名称3</p>
                        </li>
                        <li>
                            <span></span>
                            <p class="font_24 font_lighter">分类4-名称4</p>
                        </li> -->
                    </ul>
                </div>
                <div class="right_list">
                    <ul>
                        <!-- <li>
                            <div>
                                <p class="font_33">这是分类1-产品名称1</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <button class="font_24">了解详情</button>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li>
                        <li>
                            <div>
                                <p class="font_33">这是分类1-产品名称1</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <button class="font_24">了解详情</button>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        // let data = {
        //     '我们的产品分类1':
        //         [
        //             {
        //                 tag:'分类1-名称1',
        //                 msg:{
        //                     title:'这是分类1-产品名称1',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //             {
        //                 tag:'分类1-名称2',
        //                 msg:{
        //                     title:'这是分类1-产品名称2',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //            {
        //                 tag:'分类1-名称3',
        //                 msg:{
        //                     title:'这是分类1-产品名称3',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //            {
        //                 tag:'分类1-名称4',
        //                 msg:{
        //                     title:'这是分类1-产品名称4',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },        
        //             ],
        //     '我们的产品分类2':
        //         [
        //             {
        //                 tag:'分类2-名称1',
        //                 msg:{
        //                     title:'这是分类2-产品名称1',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //             {
        //                 tag:'分类2-名称2',
        //                 msg:{
        //                     title:'这是分类2-产品名称2',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //            {
        //                 tag:'分类2-名称3',
        //                 msg:{
        //                     title:'这是分类2-产品名称3',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //            {
        //                 tag:'分类2-名称4',
        //                 msg:{
        //                     title:'这是分类2-产品名称4',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //             ],
        //     '我们的产品分类3':
        //         [
        //             {
        //                 tag:'分类3-名称1',
        //                 msg:{
        //                     title:'这是分类3-产品名称1',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //             {
        //                 tag:'分类3-名称2',
        //                 msg:{
        //                     title:'这是分类3-产品名称2',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //            {
        //                 tag:'分类3-名称3',
        //                 msg:{
        //                     title:'这是分类3-产品名称3',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //             {
        //                 tag:'分类3-名称4',
        //                 msg:{
        //                     title:'这是分类3-产品名称4',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //             ],
        //     '我们的产品分类4':
        //         [
        //             {
        //                 tag:'分类4-名称1',
        //                 msg:{
        //                     title:'这是分类4-产品名称1',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //             {
        //                 tag:'分类4-名称2',
        //                 msg:{
        //                     title:'这是分类4-产品名称2',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //             },
        //            {
        //                 tag:'分类4-名称3',
        //                 msg:{
        //                     title:'这是分类4-产品名称3',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //            {
        //                 tag:'分类4-名称4',
        //                 msg:{
        //                     title:'这是分类4-产品名称4',
        //                     count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
        //                     img:'./img/u227.png',
        //                     src:'./product_dail.html'
        //                 }
        //            },
        //             ]                    
        // };
        let tablist = document.querySelector('.classification_box ul');
        let taglsit = document.querySelector('.product_list .tag ul');
        let daillist = document.querySelector('.right_list ul');
        let head = document.querySelector('header')
        let tabBox = document.querySelector('.classification_box');
        let tag = document.querySelector('.product_list .tag')
        let i = 0;
        get({
            type:'GET',
            url:'/v1/product/list',
            data:{},
            success:function(res){
                if(res.code === 200){
                    console.log(res)
                    let data = res.data;
                    creator(data)
                }
            }
        })
        // function getData(){
        //     return new Promise((resolve,reject)=>{
        //         get({
        //     type:'GET',
        //     url:'/v1/product/list',
        //     data:{},
        //     success:function(res){
        //         if(res.code === 200){
        //             console.log(res)
        //             let data = res.data;
        //             return res.data;
        //             //creator(data)
        //         }
        //     }
        // })
        //     })
        // }
        // let data = getData().then(res=>{
        //     var data = res;
        //     return data;
        // })
        // console.log(data)
        function creator(data){
            for (let key in data) {
                    i++
                    if(i===1){
                        tablist.innerHTML += `<li class="font_24 active" data-i='${key}'>${key}</li>`
                        creatorTag(data[tablist.children[0].dataset.i],i)
                    }else{
                            tablist.innerHTML += `<li class="font_24" data-i='${key}'>${key}</li>`
                        }
          
                    }
                    let li_list = document.querySelectorAll('.classification_box ul li')
        tablist.addEventListener('click',(e)=>{
            li_list.forEach(v=>v.classList.remove('active'))
            if(e.target.localName==='li'){
                e.target.classList.add('active');
                taglsit.innerHTML = ''
                creatorTag(data[e.target.dataset.i],i)
            }
        })        
        }
        // for (let key in data) {
        //         i++
        //     if(i===1){
        //             tablist.innerHTML += `<li class="font_24 active" data-i='${key}'>${key}</li>`
        //             creatorTag(data[tablist.children[0].dataset.i],i)
        //         }else{
        //             tablist.innerHTML += `<li class="font_24" data-i='${key}'>${key}</li>`
        //     }
          
        // }
        // let li_list = document.querySelectorAll('.classification_box ul li')
        // tablist.addEventListener('click',(e)=>{
        //     li_list.forEach(v=>v.classList.remove('active'))
        //     if(e.target.localName==='li'){
        //         e.target.classList.add('active');
        //         taglsit.innerHTML = ''
        //         creatorTag(data[e.target.dataset.i],i)
        //     }
        // })
        taglsit.addEventListener('click',(e)=>{
            if(e.target.localName !== 'p')return;
            // let tagChildArr = document.querySelectorAll('.product_list .tag ul li')
            // tagChildArr.forEach((v,i)=>{
            //     for(let i = 0;i<v.children.length;i++){
            //         v.children[i].classList.remove("active")
            //     }
            //     //v.children.forEach(v=>v.classList.remove('active'));
            // });
            //e.target.classList.add('active'); 
              // e.target.previousElementSibling.classList.add('active');
              console.log(daillist.children[e.target.dataset.i].offsetTop-60)
               window.scrollTo({
                    top:daillist.children[e.target.dataset.i].offsetTop-60,
                    behavior:'smooth',
                })
            
        })
        function creatorTag(data){
            daillist.innerHTML = '';
            data.forEach((v,index)=>{
                let {tag,msg} = v;
                if(index===0){
                        taglsit.innerHTML += `
                    <li '>
                            <span class="active"></span>
                            <p class="font_24 font_lighter active" data-i="${index}">${tag}</p>
                        </li>
                    `
                        daillist.innerHTML += `<li>
                            <div>
                                <p class="font_33">${msg.title}</p>
                                <p class="font_24 font_black txt_count">${msg.count}</p>
                                <a class="font_24" href='${msg.src}'>了解详情</a>
                            </div>
                            <img src="${msg.img}" alt="">
                        </li>
                            
                        `
                    }else{
                        taglsit.innerHTML += `
                    <li '>
                            <span class=""></span>
                            <p class="font_24 font_lighter " data-i="${index}">${tag}</p>
                        </li>
                    `
                    daillist.innerHTML += `<li>
                            <div>
                                <p class="font_33">${msg.title}</p>
                                <p class="font_24 font_black txt_count">${msg.count}</p>
                                <a class="font_24" href='${msg.src}'>了解详情</a>
                            </div>
                            <img src="${msg.img}" alt="">
                        </li>
                            
                        `
                }
            })
            
        }
        function clear(index){
            let tagChildArr = document.querySelectorAll('.product_list .tag ul li')
            tagChildArr.forEach((v,i)=>{
                for(let i = 0;i<v.children.length;i++){
                    v.children[i].classList.remove("active")
                }
                //v.children.forEach(v=>v.classList.remove('active'));
            });
            for(let i = 0;i<tagChildArr[index].children.length;i++){
                    tagChildArr[index].children[i].classList.add("active")
                   
                }
        }
        window.addEventListener('scroll',()=>{
            let tagChildArr = document.querySelectorAll('.product_list .tag ul li')
            // tagChildArr.forEach((v,i)=>{
            //     console.log(v.offsetTop)
            //     if(window.scrollY == v.offsetTop){
            //             console.log("ddd")
                       
            //         }
            //     for(let i = 0;i<v.children.length;i++){
            //         v.children[i].classList.add("active")
                   
            //     }
            // });
            if(window.scrollY >= 654 && window.scrollY < 1204){
                clear(0);
               
            }else if(window.scrollY >= 1204 && window.scrollY < 1754){
                clear(1);
              
            }else if(window.scrollY >= 1754 && window.scrollY < 2000){
                clear(2);
              
            }else if(window.scrollY >= 2000){
                clear(3);
               
            }
            if(window.scrollY >=  650 && window.scrollY <=  2350){
                head.style.display = 'none';
                tabBox.classList.add('active');
                tag.classList.add('active');
            }else if(window.scrollY <650){
                head.style.display = 'block';
                tabBox.classList.remove('active');
                tag.classList.remove('active');
            }else{
                tabBox.classList.remove('active');
                tag.classList.remove('active');
            }
        })
    }
</script>
</html>